<template>
  <div class="home page">
    <header class="page-header">
      <div class="container page-title">AI 应用中心</div>
    </header>
    <main class="container home-main">
      <div class="grid">
        <router-link class="app-card card" to="/love">
          <img class="app-avatar" src="/favicon.ico" alt="love" />
          <div class="app-meta">
            <h3>AI 恋爱大师</h3>
            <p>聊天室风格，SSE 实时对话</p>
          </div>
        </router-link>
        <router-link class="app-card card" to="/manus">
          <img class="app-avatar" src="/favicon.ico" alt="manus" />
          <div class="app-meta">
            <h3>AI 超级智能体</h3>
            <p>工具增强，SSE 实时对话</p>
          </div>
        </router-link>
      </div>
    </main>
  </div>
  
</template>

<script setup lang="ts">
</script>

<style scoped>
.home-main{ padding: 32px 0; }
.grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.app-card{ display: flex; align-items: center; gap: 12px; padding: 16px; text-decoration: none; color: inherit; }
.app-card:hover{ border-color: var(--primary); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.app-avatar{ width: 48px; height: 48px; border-radius: 10px; }
.app-meta h3{ margin: 0 0 6px; font-size: 18px; }
.app-meta p{ margin: 0; color: var(--muted-color); }
</style>
